<!-- Inline styles to prevent ugly re-renders as stylesheet loads asynchronously 
This is visually identical to the content of recorder.html, but it might be better
to have some difference to give the user the idea of a bit of progress
-->
<div id="booting" style="
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background: white;
    z-index: 100000;">
    <span id="booting-span" style="
        text-align: center;
        font-family: sans-serif;
        font-size: 18px;
        position: relative;
        display: block;
        top: 50%;
        margin-top: -9px;
        white-space: pre;
        ">Loading Selenium Builder...</span>
</div>

<span id="loading" style="display: none">Loading...</span>

<!-- Header and menu -->
<div class="header">
  <img id="header-logo" src="img/builder-logo-small.png" alt="Welcome to Selenium Builder!" />  
  
  <div id="header-status">
    <span id="heading-startup" style="display: none">
    </span>

    <span id="heading-record" style="display: none">
        <span class="when-off">Currently recording at: <a id="record-url-display">http://www.example.com/</a></span>
        <span class="when-on">Waiting for page to load</span>
    </span>

    <span id="heading-edit" style="display: none">
        <span id="edit-test-script-nopath">Current test has not been <a style="text-decoration:underline;" href="#" id="edit-test-script-nopath-save">saved</a>.</span>
        <span id="edit-test-script-path"></span>
    </span>
  </div>
  
  <ul id="menu" style="display: none;">
    <li><a href="#">File</a>
        <ul>
            <li id="script-save-li" style="display: none;"><a href="#script-save" name="script-save" id="script-save">Save to server</a></li>
            <li><a href="#script-export" name="script-export" id="script-export">Save to disk</a></li>
            <li id="script-discard-li"><a href="#script-discard" name="script-discard" id="script-discard">Discard and start over</a></li> 
        </ul>
    </li>
    <li>
      <a href="#record" name="record" id="record">Record</a>
    </li>
    <li><a href="#">Run</a>
      <ul>
          <li><a href="#run-locally" name="run-locally" id="run-locally">Run test locally</a></li>
          <li id="run-onrc-li" style="display: none;"><a href="#run-onrc" name="run-onrc" id="run-onrc">Run on Selenium RC</a></li>
          <li id="run-onserver-li" style="display: none;"><a href="#run-onserver" name="run-onserver" id="run-onserver">Run on server</a></li>
          <span id="multiscript-2">
            <li><a href="#run-suite-locally" name="run-suite-locally" id="run-suite-locally">Run suite locally</a></li>
            <li id="run-suite-onrc-li" style="display: none;"><a href="#run-suite-onrc" name="run-suite-onrc" id="run-suite-onrc">Run suite on Selenium RC</a></li>
          </span>
      </ul>
    </li>
    <li><a href="#">Suite</a>
      <ul>
        <span id="multiscript-0">
          <li id="suite-path"></li>
          <li><a href="#suite-save" name="suite-save" id="suite-save">Save suite</a></li>
          <li><a href="#suite-discard" name="suite-discard" id="suite-discard">Discard and start over</a></li>
        </span>
        <li><a href="#suite-recordscript" name="suite-recordscript" id="suite-recordscript">Record new script</a></li>
        <li><a href="#suite-addscript" name="suite-addscript" id="suite-addscript">Add script from file</a></li>
        <li><a href="#suite-importscript-sel2" name="suite-importscript-sel2" id="suite-importscript-sel2">Add imported Selenium 1 script from Selenium 2 file</a></li>
        <li><a href="#suite-addscript-sel2" name="suite-addscript-sel2" id="suite-addscript-sel2">Add script from Selenium 2 file</a></li>
        <span id="multiscript-1">
          <li><a href="#suite-removescript" name="suite-removescript" id="suite-removescript">Remove current script</a></li>
          <li>Scripts</li>
          <span id="scriptlist">
          
          </span>
        </span>
      </ul>
    </li>
  </ul>
</div>


<!-- Startup screen -->
<div id="startup" style="display: none">
    <h1>Selenium Builder</h1>

    <p>Would you like to:</p>
    <ul>
        <li id="startup-import">
          <h3><a name="import" href="#import">Open</a> a test file</h3>
        </li>
        <li id="startup-import-sel2">
          <h3><a name="import" href="#import">Import</a> a Selenium 2 test file as a Selenium 1 script</h3>
        </li>
        <li id="startup-open-sel2">
          <h3><a name="open" href="#open">Open</a> a Selenium 2 test file <i>(under development)</i></h3>
        </li>
        <li id="startup-suite-import">
          <h3><a name="suite-import" href="#suite-import">Open</a> a test suite</h3>
        </li>
        <li id="startup-record">
            <h3><a name="record" href="#record">Start recording</a> a new script at</h3>
            <form method="get" action="#record" id="startup-start-recording">
              <p>
                <input id="startup-url" type="text" class="texta" size="35"/>
                <input type="submit" value="Go!" class="button"/>
              </p>
            </form>
            <form method="get" action="#record-sel2" id="startup-start-recording-sel2">
              <p>
                or <input type="submit" value="Record Selenium 2 Script" class="button"/>
              </p>
            </form>
            <p class="cookie-warning">This will delete all cookies for the domain you're recording for.</p>
        </li>
    </ul>
</div>

<!-- Panels of buttons and informational displays. -->
<div id="panels">
  
  <div id="suite-panel" style="display: none;" class="panel">
    <div id="suite-saverequired" style="display: none">Suite has unsaved changes.</div>
    <div id="suite-cannotsave" style="display: none">Can't save suite: Save all scripts to disk as HTML first.</div>
    <div id="edit-suite-playing" style="display: none;">
      <a href="#stop-suite-playback" name="stop-suite-playback" id="edit-suite-stop-playback" class="button">Stop Playback</a>
    </div>
    <div id="edit-suite-stopping" style="display: none;">
      Stopping...
    </div>
  </div>

  <div id="edit-panel" style="display: none;" class="panel">
    <span id="edit-local-playing" style="display: none;">
      <a href="#edit-stop-local-playback" name="edit-stop-local-playback" id="edit-stop-local-playback" class="button">Stop Playback</a>
    </span>
    <span id="edit-ondemand-playing" style="display: none;">
      <a href="#stop-ondemand-playback" name="stop-ondemand-playback" id="edit-stop-ondemand-playback" class="button">Stop Playback</a>
    </span>
    <span id="edit-ondemand-stopping" style="display: none;">
      Stopping...
    </span>
    <a href="#edit-clearresults" style="display: none;" name="edit-clearresults" id="edit-clearresults" class="button">Clear results</a>
  </div>
  
  <div id="record-panel" style="display: none;" class="panel">
    <a href="#assert" name="assert" id="record-assert" class="button">
      <span class="when-off">Record a verification</span><span class="when-on">Record further steps</span>
    </a>
    <a href="#stop" name="stop" id="record-stop-button" class="button">Stop recording</a>
    <img id="record-spinner" src="img/loading.gif" />
    <div>
      <span id="record-help"><br/>Listening for events, click or type in the page to capture another action.</span>
      <span id="record-assert-help" style="display:none"><br/>Select some text or click on an element in order to register an assertion.</span>
      <span id="record-waitfor-help" style="display:none"><br/>Select some text or click on an element in order to instruct the test to wait for its presence.</span>
    </div>
  </div>
  
  <div id="error-panel" style="display: none; font-size: 130%; color: #ffffff; background-color: #880000; padding: 10px; margin: 4px;">
    Some error has occurred!
  </div>
  
  <div id="dialog-attachment-point">
    <!-- Incidential dialogs put themselves into this div. -->
  </div>
</div>


<!-- The steps -->
<div id="steplist" style="display:none;">
  <div id="steps-top"></div>
  <div id="steps"></div>
  <div id="bottom"></div>
</div>

<!-- Splash screen -->
<div id="cover">
  <div id="statusMessage">
    <center><div style="font-weight:bold;font-size:14px;" id="loadMessage">Starting Up..</div></center><br>
    <center><img src="img/loading.gif"></center>
  </div>
</div>